<template>
  <view class="container" :style="!edit?'background:#ffffff':''">
    <div class="content">
      <div style="height: 20rpx"></div>
      <div v-for="item in list" v-if="edit" @click="itemCar(item)" style="margin-top: 15rpx">
        <div class="card">
          <div style="width: 90%;margin-left: 5%;">
            <div style="height: 10px;"></div>
            <div style="display: flex;align-items: center;justify-content: space-between;">
              <div>
                <div class="userName">{{ item.userName }}</div>
                <div style="height: 10px;"></div>
                <div class="phoneNumber">{{ item.phonenumber }}</div>
              </div>
              <div>
                <u-icon size="20" name="arrow-right" color="#000000"></u-icon>
              </div>
            </div>
            <div style="height: 10px;"></div>
          </div>
        </div>
      </div>
      <div v-if="edit" style="height: 30px"></div>
      <div class="btn" v-if="edit" @click="addInfo">新增司机</div>

      <div v-if="edit" style="height: 30px"></div>
      <!-- <div class="btn" v-if="edit" @click="editInfo">编辑信息</div> -->
      <!-- 编辑表单 -->
      <div style="color: #000000" v-if="!edit">
        <div style="height: 10px;"></div>
        <div>
          <div>姓名</div>
          <div style="height: 15rpx;"></div>
          <div class="borders">
            <input @change="changeUserName" style="height: 42px;" placeholder="请输入" v-model="form.userName" type="text">
          </div>
        </div>
        <!-- <div style="height: 10px;"></div>
        <div>
          <div>昵称</div>
          <div style="height: 15rpx;"></div>
          <div class="borders">
            <input style="height: 42px;" placeholder="请输入" v-model="form.nickName" type="text">
          </div>
        </div> -->
        <!-- <div style="height: 10px"></div>
        <div>
          <div>邮箱</div>
          <div style="height: 15rpx;"></div>
          <div class="borders">
            <input style="height: 42px;" placeholder="请输入" v-model="form.email" type="text">
          </div>
        </div> -->
        <div style="height: 10px"></div>
        <div>
          <div>电话</div>
          <div style="height: 15rpx;"></div>
          <div class="borders">
            <input @change="changeTel" style="height: 42px;" placeholder="请输入" v-model="form.phonenumber" type="text">
          </div>
        </div>
        <div style="height: 10px"></div>
        <div>
          <div>密码</div>
          <div style="height: 15rpx;"></div>
          <div class="borders">
            <input style="height: 42px;" placeholder="请输入" v-model="form.password" type="text">
          </div>
        </div>
        <div style="height: 10px"></div>
      </div>
    </div>
    <div style="height: 30px"></div>
    <div class="btn" v-if="!edit" @click="saveInfo">保存信息</div>
  </view>
</template>
<script>
import { driverList, driverEdit, driverAdd } from "../api/api";
export default {
  data() {
    return {
      list: [],
      edit: true,
      id: "",
      form: {
        nickName: "",
        userName: "",
        phonenumber: "",
        email: "",
        password: "",
      },
    };
  },
  methods: {
    changeUserName(e){
      this.form.nickName = e.detail.value;
    },
    changeTel(e){
      this.form.email = e.detail.value + '@qq.com';
    },
    addInfo() {
      this.edit = false;
    },
    itemCar(i) {
      this.edit = false;
      console.log(i);
      this.form = {
        userName: i.userName,
        nickName: i.nickName,
        phonenumber: i.phonenumber,
        email: i.email,
      };
      this.id = i.userId;
    },
    editInfo() {
      this.edit = false;
      console.log(this.edit);
    },
    clearForm() {
      this.id = "",
        this.form = {
          nickName: "",
          userName: "",
          phonenumber: "",
          email: "",
          password: "",
        };
    },
    saveInfo() {
      const allNotEmpty = Object.keys(this.form).every(
        (key) =>
          this.form[key] !== null &&
          this.form[key] !== undefined &&
          this.form[key] !== ""
      );
      if (allNotEmpty) {
        if (!this.id) {
          driverAdd({
            nickName: this.form.nickName,
            userName: this.form.userName,
            phonenumber: this.form.phonenumber,
            email: this.form.email,
            password: this.form.password,
          }).then((res) => {
            console.log(res.data);
            if (res.data.code == 200) {
              uni.showToast({
                title: res.data.msg,
                icon: "success",
                mask: true,
              });
              this.listFun();
              this.clearForm();
              this.edit = true;
            } else {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
                mask: true,
              });
            }
          });
        } else {
          driverEdit({
            userId: this.id,
            nickName: this.form.nickName,
            userName: this.form.userName,
            phonenumber: this.form.phonenumber,
            email: this.form.email,
            password: this.form.password,
          }).then((res) => {
            console.log(res.data);
            if (res.data.code == 200) {
              uni.showToast({
                title: res.data.msg,
                icon: "success",
                mask: true,
              });
              this.listFun();
              this.clearForm();
              this.edit = true;
            } else {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
                mask: true,
              });
            }
          });
        }
      } else {
        uni.showToast({ title: '请输入完整', icon: 'none' })
      }

    },
    listFun() {
      driverList({ remark: '养殖场司机' }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.list = res.data.rows;
          console.log(this.list, "list");
        }
      });
    },
  },
  onShow() {
    this.listFun();
    // 有机质类型

  },
};
</script>
<style lang="scss">
.userName {
  font-size: 20px;
  font-weight: bold;
}

.phoneNumber {
  font-size: 14px;
  color: gray;
}

.container {
  height: 100vh;
  width: 100vw;
  background: #f2f8f5;
  overflow-y: scroll;
  color: #000000;
}

.content {
  width: 90%;
  margin-left: 5%;
}

.card {
  padding: 10;
  background: #ffffff;
  border-radius: 10px;
}

.cards {
  width: 90%;
  margin-left: 5%;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  background: #000000;
  color: #fff;
  width: 90%;
  margin-left: 5%;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.borders {
  border: 1px solid #000000;
  border-radius: 5px;
  text-align: center;
}

.borders-min {
  border: 1px solid #1a512c;
  border-radius: 5px;
  text-align: center;
}
</style>